<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="../css/reset.css" />
		<link rel="stylesheet" href="../css/header1.css"/>
		<link rel="stylesheet" href="../css/add.css" />
		<script src="../js/artTemplate.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<header>
			<div class="gcs-head">
				<div id="jump" class="gcs-left"><img src="../img/fhjt.png"/></div>
				<div class="gcs-center">新建日报</div>
				<div class="gcs-right"></div>
			</div>
		</header>
		<script type="text/html" id="products-temp">
			 {{each list as v}}
			 		<div class="add-del1">
						<ul>
							<li class="pre"><img src="{{v.imgUrl}}"/></li>
							<li>{{v.content}}</li>
						</ul>
					</div>
			 {{/each}}
		</script>
		<main>
			<nav class="add-nav">
				<ul id="add-huan">
					<li>关键信息</li>
					<li id="jiben">基本信息</li>
					<li class="add-active">维护信息</li>
				</ul>
			</nav>
			<div class="add-box">
				<div class="add-box1"><button class="add-btn">添加新行</button></div>
				<div class="add-del">
					<!--<div class="add-del1">
						<ul>
							<li class="pre"><img src="../img/shanchu.png"/></li>
							<li>YG103880188111</li>
						</ul>
					</div>
					<div class="add-del2">
						<ul>
							<li class="pre"><img src="../img/shanchu.png"/></li>
							<li>YG103880188113</li>
						</ul>
					</div>
					<div class="add-del3">
						<ul>
							<li class="pre"><img src="../img/shanchu.png"/></li>
							<li>ZSB203880182145</li>
						</ul>
					</div>
					<div class="add-del4">
						<ul>
							<li class="pre"><img src="../img/shanchu.png"/></li>
							<li>YG103880188251</li>
						</ul>
					</div>
					<div class="add-del5">
						<ul>
							<li  class="pre"><img src="../img/shanchu.png"/></li>
							<li>YG103880188973</li>
						</ul>
					</div>-->
				</div>
			</div>
		</main>
		<input id="IPTs-1" style="display: none;" type="file" />
		<em class="flex-1">
			
		</em>
		<div class="add-shan">
			<p>是否删除？</p>
			<div class="add-sk">
				<button class="add-shi">是</button>
			    <button class="add-fou">否</button>
			</div>
		</div>
		<div class="add-ipt"><input type="text"/></div>
		<script src="../js/jquery-2.2.4.min.js"></script>
		<script src="../js/flexible.debug.js"></script>
	    <script src="../js/flexible_css.debug.js"></script>
	    <script>
	    	$(function($){
	    		$("#add-huan").children().click(function(){
		    		$(this).addClass("add-active").siblings().removeClass("add-active");
		    	});
//	    		$('.pre').children().click(function(){
//	    			$(this).addClass('red').parents('div').siblings().find('li').removeClass('red');
//	    		});
                $('.add-del').on('click','.pre',function(){
                	$(this).addClass('red').parent().parent().siblings().children().children().removeClass('red').first().addClass('pre')
                })
	    		 $('.add-del').on('click','.pre',function(){
	    			$(this).addClass('active');
                    $('.add-shan').show();
		    		$('.flex-1').show();
		    	});
		    	 $('.add-shan').on('click','.add-shi',function(){
		    		$('.active').parent().parent().remove()
		    		$('.add-shan').hide()
		    		$(".flex-1").hide();
		    	})
		    	 $('.add-shan').on('click','.add-fou',function(){
		    	 	//因为添加active没有删除，所以出现了全部删除的情况；
		    	 	$('.pre').removeClass('active');
		    	 	$('.red').removeClass('red').addClass('pre')
		    		$('.add-shan').hide()
		    		$(".flex-1").hide();
		    		
		    	});
		    	var _ture = true;
		    	$('.add-btn').click(function(){
		    		if(_ture == true){
		    			$('.add-ipt').show();
		    			_ture = false;
		    		}else{
		    		  if($('.add-ipt input').val() == ''){
		    		  	return;
		    		  }else{
		    		  		var _val = $('.add-ipt input').val().trim();
		    			var _len = $('.add-del').children('div').length + 1;
		    			$('.add-del').append('<div class="add-del' + _len + '"><ul><li class="pre"><img src="../img/shanchu.png"/></li><li>' + _val + '</li></ul></div>')
		    			$('.add-ipt input').val('')
		    			$('.add-ipt').hide()
		    			$('.add-del div:even').css({
		    			'background':'#f3f3f3'
		    			});
		    			_ture = true;
		    		  }
		    		}
		    		
		    	});
		    	$('.add-ipt input').keyup(function(e){
		    		if(e.keyCode === 13){
		    			var _val = $(this).val().trim();
		    			var _len = $('.add-del').children('div').length + 1;
		    			console.log(_len)
		    			$('.add-del').append('<div class="add-del' + _len + '"><ul><li class="pre"><img src="../img/shanchu.png"/></li><li>' + _val + '</li></ul></div>')
		    			$(this).val('')
		    			$('.add-ipt').hide()
		    			$('.add-del div:even').css({
		    			'background':'#f3f3f3'
		    			})
		    		}
		    	});
		    	$('.add-del div:even').css({
		    		'background':'#f3f3f3'
		    	});
		    	$('#jiben').click(function(){
		    		location.href = "xinjian.html";
		    	})
		    	$('#jump').click(function(){
		    		location.href = "ribao.html";
		    	})
		    	
		    	
	    	})
	    		$.ajax({
					type:"get",
					url:"../json/add.json",
					async:true,
					success:function(data){
						console.log(data)
					var str = template("products-temp", {list: data});
						$(".add-del").append(str)
					}
				})	
						
	    </script>
	</body>
</html>
